<template>
  <el-drawer
    :title="drawerTitle[drawerType]"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="beforeClose"
    custom-class="tag-drawer register-single-drawer"
    v-drawerResize
  >
    <tag-step :step="step" :active="active"></tag-step>
    <register-info
      v-if="active === 0"
      ref="singleModule"
      :tagId="tagId"
      @close="beforeClose"
      @callback="confirm"
      @updateTagId="updateTagId"
    ></register-info>
    <register-source
      v-if="active === 1"
      ref="singleModule"
      :tagId="tagId"
      @close="beforeClose"
      @callback="confirm"
      @prev="handlePrev"
    ></register-source>
    <register-responser
      v-if="active === 2"
      ref="singleModule"
      :tagId="tagId"
      @close="beforeClose"
      @callback="confirm"
      @prev="handlePrev"
    ></register-responser>
    <register-online
      v-if="active === 3 || active === 4"
      ref="singleModule"
      :tagId="tagId"
      @close="beforeClose"
      @callback="confirm"
    ></register-online>
  </el-drawer>
</template>

<script>
import registerInfo from './register-info'
import registerSource from './register-source'
import registerResponser from './register-responser'
import registerOnline from './register-online'
export default {
  components: {
    registerInfo,
    registerSource,
    registerResponser,
    registerOnline
  },
  data() {
    return {
      tagId: '',
      drawerType: 'add',
      drawerTitle: {
        add: '新增注册',
        edit: '注册明细'
      },
      drawerVisible: false,
      active: 0,
      tagStatus: {
        10: 0,
        20: 1,
        30: 2,
        40: 3,
        50: 4
      },
      step: [
        {
          icon: 'iconBase',
          name: '基本信息'
        },
        {
          icon: 'iconTable',
          name: '来源表信息'
        },
        {
          icon: 'iconPersonal',
          name: '责任人信息'
        },
        {
          icon: 'iconComplete',
          name: '完成'
        }
      ],
      tagDetail: {}
    }
  },
  methods: {
    showDrawer(tag) {
      if (tag && tag.tagId) {
        this.drawerType = 'edit'
        this.tagId = tag.tagId
        this.active = this.tagStatus[tag.nodeId]
        this.drawerVisible = true
        this.$nextTick(() => {
          if (this.$refs.singleModule.getSelections) this.$refs.singleModule.getSelections()
          this.$refs.singleModule.getDetail()
        })
      } else {
        this.drawerVisible = true
        this.$nextTick(() => {
          if (this.$refs.singleModule.getSelections) this.$refs.singleModule.getSelections()
        })
      }
    },
    updateTagId(tagId) {
      this.tagId = tagId
    },
    confirm(params) {
      if (params) {
        if (params.type === 'close') {
          this.beforeClose()
          this.$emit('callback')
          return
        }
      }
      if (this.active < 3) {
        this.active++
        this.$nextTick(() => {
          if (this.$refs.singleModule.getSelections) this.$refs.singleModule.getSelections()
          this.$refs.singleModule.getDetail()
        })
      } else {
        this.beforeClose()
        this.$emit('callback')
      }
    },
    handlePrev() {
      this.active--
      this.$nextTick(() => {
        if (this.$refs.singleModule.getSelections) this.$refs.singleModule.getSelections()
        this.$refs.singleModule.getDetail()
      })
    },
    beforeClose() {
      this.drawerType = 'add'
      this.tagId = ''
      this.active = 0
      this.$refs.singleModule.clearForm()
      this.drawerVisible = false
      this.$emit('callback')
    }
  }
}
</script>

<style lang="scss">
.tag-drawer.register-single-drawer {
  .el-drawer__body {
    .drawer-wrap {
      top: 100px;
      &.disabled {
        bottom: 30px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
      }
      .tag-status-list li {
        padding: 10px 40px;
        .el-col {
          word-break: break-all;
          line-height: 25px;
        }
      }
    }
    .params {
      .el-input,
      .el-select {
        width: 100%;
      }
      .el-button {
        margin-top: 5px;
      }
    }
  }
  .single-btn {
    margin: 20px 0;
    .el-button {
      margin-right: 20px;
    }
  }
}
</style>
